<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物</title>
    <link rel="shortcut icon" href="https://img1.baidu.com/it/u=3600306204,4254793728&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1670950800&t=0ebe2238e63b5b111ff3cc7b908a3d8d" type="image/x-icon"/>
    <link rel="stylesheet" href="./assets/css/animate.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet/less" href="./css/shop.less">
    <link rel="stylesheet/less" href="./css/bottom.less">
</head>
<body>
    <nav class="nav">
        <div>
            <div class="log flipInX wow" data-wow-delay=".2s">
                <a href="./index.html"></a>
                <img src="./img/log.png" usemap="log">
            </div>

            <nav class="top">
                <div>
                    <div class="top-nav flipInX wow" data-wow-delay=".2s">商品分类</div>
                    <div class="top-nav flipInX wow" data-wow-delay=".2s">Xiaomi手机</div>
                    <div class="top-nav flipInX wow" data-wow-delay=".2s">电视</div>
                    <div class="top-nav flipInX wow" data-wow-delay=".2s">路由器</div>

                    <div class="show none">
                        <div class="img">
                            <img src="./img/阿晴.png" alt="">

                            <div>
                                名字
                            </div>
                            <div>
                                ￥123123
                            </div>
                        </div>
                    </div>
                    <div class="show none">
                        <div class="img">
                            <img src="./img/阿晴.png" alt="">

                            <div>
                                名字
                            </div>
                            <div>
                                ￥123123
                            </div>
                        </div>

                        <div class="img">
                            <img src="./img/阿晴.png" alt="">

                            <div>
                                名字
                            </div>
                            <div>
                                ￥123123
                            </div>
                        </div>
                    </div>
                    <div class="show none">
                        <div class="img">
                            <img src="./img/阿晴.png" alt="">

                            <div>
                                名字
                            </div>
                            <div>
                                ￥123123
                            </div>
                        </div>
                        <div class="img">
                            <img src="./img/阿晴.png" alt="">

                            <div>
                                名字
                            </div>
                            <div>
                                ￥123123
                            </div>
                        </div>
                        <div class="img">
                            <img src="./img/阿晴.png" alt="">

                            <div>
                                名字
                            </div>
                            <div>
                                ￥123123
                            </div>
                        </div>
                        <div class="img">
                            <img src="./img/阿晴.png" alt="">

                            <div>
                                名字
                            </div>
                            <div>
                                ￥123123
                            </div>
                        </div>
                        <div class="img">
                            <img src="./img/阿晴.png" alt="">

                            <div>
                                名字
                            </div>
                            <div>
                                ￥123123
                            </div>
                        </div>
                        <div class="img">
                            <img src="./img/阿晴.png" alt="">

                            <div>
                                名字
                            </div>
                            <div>
                                ￥123123
                            </div>
                        </div>
                    </div>
                    <div class="show none">
                        <div class="img">
                            <img src="./img/阿晴.png" alt="">

                            <div>
                                名字
                            </div>
                            <div>
                                ￥123123
                            </div>
                        </div>
                        <div class="img">
                            <img src="./img/阿晴.png" alt="">

                            <div>
                                名字
                            </div>
                            <div>
                                ￥123123
                            </div>
                        </div>
                        <div class="img">
                            <img src="./img/阿晴.png" alt="">

                            <div>
                                名字
                            </div>
                            <div>
                                ￥123123
                            </div>
                        </div>
                    </div>
                </div>

                <div class="input flipInX wow" data-wow-delay=".2s">
                    <input type="text">
                    <div class="iconfont">&#xe622;</div>
                </div>
            </nav>

            <nav class="bottom">
                <div class=" flipInX wow" data-wow-delay=".2s">Xiaomi手机</div>

                <div>
                    <div class=" flipInX wow" data-wow-delay=".2s">
                        <a href="#text">概述页</a>
                    </div>
                    <div class=" flipInX wow" data-wow-delay=".2s">
                        <a href="#parameter">参数页</a>
                    </div>
                    <div class=" flipInX wow" data-wow-delay=".2s">
                        <a href="#">用户评价</a>
                    </div>
                    <div class=" flipInX wow" data-wow-delay=".2s">
                        <a href="#">咨询客服</a>
                    </div>

                    <a href="./end.html" class=" flipInX wow" data-wow-delay=".2s">立即购买</a>
                </div>
            </nav>
        </div>
    </nav>

    <div class="content">
        <div id="text" class="text bounceIn wow" data-wow-delay=".2s">
            <div class="name">
                <img src="./img/maximg/name.png">
                忘情一刻, 真徕卡
            </div>
            <img src="./img/maximg/13pro.jpg">
        </div>

        <div class="text2 bounceIn wow" data-wow-delay=".2s">
            <div>
                <p>小米、徕卡联合研发，再现原汁原味经典影像</p>
                <p>三大徕卡大师镜头，搭载徕卡专业光学，随手一拍，精妙百出</p>
                <p>第二代 骁龙8 旗舰处理器，潜能爆发，跃级而至</p>
                <p>全新亮眼屏幕，为你大展技术与创新</p>
                <p>更有MIUI 14，这一次，锐意新生</p>
                <p>年度旗舰，何止旗舰</p>
            </div>
            
            <img src="./img/maximg/1142.jpg" alt="">
        </div>

        <div class="text3 bounceIn wow" data-wow-delay=".2s">
            <div>
                <img src="./img/1679.png">
                <p>小米｜徕卡 联合研发</p>
                <p>忘情一刻，真徕卡</p>
            </div>
            <img src="./img/maximg/1672.jpg" alt="">
        </div>

        <div id="parameter" class="parameter">
            <div>
                <img src="./img/maximg/13pro.png">
                <div>
                    <img src="./img/maximg/name.png" alt="">
                    <h1>徕卡影像</h1>
                    <h1>三颗徕卡大师镜头</h1>
                    <p>徕卡专业光学镜头</p>
                    <p>1 英寸大底专业主摄</p>
                    <p>徕卡 75mm 浮动长焦镜头</p>
                    <p>徕卡原生双画质</p>
                    <p>徕卡超色彩影像</p>
                </div>
            </div>

            <div>
                <div>
                    <img src="./img/maximg/13cpu.png">
                    <div>
                        <h1>第二代</h1>
                        <h1>骁龙8 旗舰处理器</h1>
                        <p>大中小核全升级</p>
                        <p>性能大爆发，体验大不同</p>
                    </div>
                </div>
                
                <div>
                    <div>
                        <img src="./img/maximg/13propm.png">
                        <div>
                            <h1>2K</h1>
                            <h1>超视感屏</h1>
                            <p>新一代发光材料</p>
                            <p>超动态显示</p>
                            <p>1-120Hz 智能动态刷新率</p>
                        </div>
                    </div>
    
                    <div>
                        <img src="./img/maximg/13prodc.png">
                        <div>
                            <h1>小米澎湃电池管理系统</h1>
                            <h1>双自研芯片</h1>
                            <p>充电管理芯片 + 电池管理芯片</p>
                            <p>120W 小米澎湃有线秒充</p>
                            <p>50W Pro 小米澎湃无线秒充</p>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <div>
                    <img src="./img/maximg/13profs.png">
                    <div>
                        <h1>IP68</h1>
                        <h1>防泼溅 抗浸水</h1>
                        <p>灵感不中断</p>
                        <p>体验更自如</p>
                    </div>
                </div>

                <div>
                    <img src="./img/maximg/mi14.png">
                    <div>
                        <h1>MIUI 14</h1>
                        <h1>锐意新生</h1>
                        <p>精简、精妙</p>
                        <p>倍感流畅</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="body-bottom">
        <a href="#">
            关于我们>
        </a>
    </div>
    <!-- <div class="mi-bottom">
        <div class="mimi layout">
            <div class="bottom-img">
                <img src="img/bottom/logo-mi2.png" alt="">
            </div>
            <div class="bottom-center layout">
                <div class="first-line">
                    <ul>
                        <li class="first-line-li">
                            <a href="#">小米商城|</a>
                            <a href="#">MIUI|</a>
                            <a href="#">米家|</a>
                            <a href="#">米聊|</a>
                            <a href="#">多看|</a>
                            <a href="#">游戏|</a>
                            <a href="#">政企服务|</a>
                            <a href="#">小米天猫店|</a>
                            <a href="#">小米集团隐私政策|</a>
                            <a href="#">小米儿童信息保护规划|</a>
                            <a href="#">小米商城隐私政策|</a>
                            <a href="#">小米商城用户协议|</a>
                            <a href="#">问题反馈|</a>
                            <a href="#">selectLocation|</a>
                        </li>

                    </ul>
                </div>
                <div class="first-line">
                    <ul>
                        <li class="first-line-li">
                            <a href="#">北京互联网法院法律服务工作站|</a>
                            <a href="#">中国消费者协会|</a>
                            <a href="#">北京市消费者协会|</a>

                        </li>

                    </ul>
                </div>
                <div class="second-line">
                    <p> © mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号 </p>
                    <p> （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告 </p>
                    <p>增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证 </p>
                    <p>违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>

                </div>
                <div class="third-line">
                    <a href="#"><img src="img/bottom/truste.png" alt=""></a>
                    <a href="#"><img src="img/bottom/v-logo-2.png" alt=""></a>
                    <a href="#"><img src="img/bottom/icon3.png" alt=""></a>
                    <a href="#"><img src="img/bottom/ba10428a4f9495ac310fd0b5e0cf8370.png" alt=""></a>
                    <a href="#"><img src="img/bottom/31883a2e1e13bcdd440b0071e3b3e6f4.png" alt=""></a>
                </div>
            </div>
        </div> -->

    <script src="./assets/js/jquery.min.js"></script>
    <script src="./assets/js/wow.min.js"></script>
    <script src="./assets/js/less.min.js"></script>
    <script>
        new WOW().init();
        // 这里获取顶部导航的悬停
        let show = document.getElementsByClassName('show');
        let topNav = document.getElementsByClassName('top-nav');
        let topNavArr = [...topNav];
        let showArr = [...show];

        // 
        let dText = document.getElementsByClassName('text')[0];
        let dText2 = document.getElementsByClassName('text2')[0];
        let dText3 = document.getElementsByClassName('text3')[0];
        let wHeight = document.documentElement.clientHeight;
        // 第三版（先不考虑
        // let obsOp = {
        //     root: document.getElementsByTagName('body')[0],
        //     // 可以不写默认也是0（元素的边距
        //     rootMargin: '0px',
        //     // 目标 (target) 元素与根 (root) 元素之间的交叉度是交叉比 (intersection ratio)。这是目标 (target) 元素相对于根 (root) 的交集百分比的表示，它的取值在 0.0 和 1.0 之间
        //     // 阈值为 1.0 意味着目标元素完全出现在 root 选项指定的元素中可见时，回调函数将会被执行
        //     threshold: 0.4
        // }
        // 第一个参数是回调函数，第二个是配置项
        // 回调参数----第一个：
        // let observer = new IntersectionObserver((entries, observer) => {

        // }, options);
        // rem布局（不想用）
        let documentElement = document.documentElement;
        function rem(){
            let clientWidth = documentElement.clientWidth;
            // 屏幕宽度大于750，不考虑
            if (clientWidth > 320 && clientWidth < 1200) {
                clientWidth = clientWidth;
            }else if(clientWidth < 320){
                clientWidth = 320;
            }else if(clientWidth > 1200){
                clientWidth = 1200;
            }
            documentElement.style.fontSize = clientWidth / 10 + 'px';
        }
        // 页面加载的时候判断一次
        rem();
        // 这里要考虑兼容（我比较懒，不想)


        // 这是第二版滚动显示（因为元素没有固定高度而是随视口改变所以会有和第一版一样的问题
        // 这里设置滚动显示函数
        // function showDoc(doc,docClass,top,bottom) {
        //     wHeight = document.documentElement.clientHeight;
        //     console.log(wHeight);
        //     // console.log(doc.offsetTop);
        //     // console.log(doc.offsetHeight);
        //     if(window.scrollY + wHeight >= doc.offsetTop + top && window.scrollY <= doc.offsetTop + doc.offsetHeight - bottom){
        //         // console.log(window.scrollY);
        //         // console.log('show');
        //         doc.className = `${docClass} animation opacity1`;
        //     }
        //     if (window.scrollY + wHeight < doc.offsetTop + top || window.scrollY > doc.offsetTop + doc.offsetHeight - bottom){
        //         // console.log('none');
        //         doc.className = `${docClass} animation opacity0`;
        //     }
        // }

        window.onresize = () => {
            rem();
            // 调整页面大小的时候修改顶部高度
            if (window.scrollY >= 200) {
                if (window.innerWidth <= 900) {
                    nav.style.position = 'sticky';
                    nav.style.top = `-51px`;
                }else{
                    nav.style.position = 'sticky';
                    nav.style.top = `-71px`;
                }
            }
        }
        // 这里可以不赋值，控制从多高开始下落
        let top1 = -140;
        // st1控制nav下落的定时器st2控制下落多少
        let st1 = null;
        let st2 = null;
        // 拿到导航
        let nav = document.getElementsByClassName('nav')[0];
        // 是否进行下落
        let isBottom = true;
        // 滚动控制
        window.addEventListener('scroll',() => {
            // nav在屏幕外开始下落
            if (window.scrollY >= 120) {
                // 判断是否进行下落（这里用节流，防止快速来回滚动）
                if (isBottom) {
                    clearInterval(st1);
                    clearTimeout(st2);
                    nav.style.position = 'sticky';
                    nav.style.top = 0;
                    top1 = window.innerWidth > 900? -140: -100;
                    time = window.innerWidth > 900? 700: 500;
                    isBottom = false;
                    st1 = setInterval(() => {
                        nav.style.top = `${ top1 }px`;
                        top1 = top1 + 1;
                    },10);
                    st2 = setTimeout(() => {
                        top1 = -140;
                        clearInterval(st1);
                    },time);
                }
            }else{
                // 这里一定要清定时器，不然会回到顶的时候定时器仍然会工作
                clearInterval(st1);
                clearTimeout(st2);
                isBottom = true;
                top1 = 0;
                nav.style.position = 'relative';
                nav.style.top = 0;
                for (let i = 0; i < show.length; i++) {
                    show[i].className = 'show none';
                }
            }



            // 这些是第一版滚动到元素显示（因为高度没固定所以固定滚动距离在视口高度改变时会有问题
            // // text
            // if (window.scrollY >= 700) {
            //     document.getElementsByClassName('text')[0].className = 'text animation opacity0';
            // }else{
            //     document.getElementsByClassName('text')[0].className = 'text animation opacity1';
            // }

            // // text1
            // if (window.scrollY < 500 || window.scrollY >= 1600) {
            //     document.getElementsByClassName('text2')[0].className = 'text2 animation opacity0';
            // }

            // if (window.scrollY >= 500 && window.scrollY < 1600) {
            //     document.getElementsByClassName('text2')[0].className = 'text2 animation opacity1';
            // }

            // // text3
            // if (window.scrollY < 1600 || window.scrollY >= 2700) {
            //     document.getElementsByClassName('text3')[0].className = 'text3 animation opacity0';
            // }

            // if (window.scrollY >= 1600 && window.scrollY < 2700) {
            //     document.getElementsByClassName('text3')[0].className = 'text3 animation opacity1';
            // }
        });
        // nav悬停显示
        topNavArr.forEach((element,index) => {
            // 移入nav
            element.addEventListener('mouseover',() => {
                show[index].classList.remove('none');
                show[index].className = 'show flex';
            });
            // 移出nav
            element.addEventListener('mouseleave',() => {
                show[index].classList.remove('none');
                show[index].className = 'show none';
            });
        });
        // 显示的隐藏元素移出隐藏
        showArr.forEach((element,index) => {
            element.addEventListener('mouseover',() => {
                element.classList.remove('none');
                element.className = 'show flex';
            });
            element.addEventListener('mouseleave',() => {
                element.classList.remove('none');
                element.className = 'show none';
            });
        });
    </script>
</body>
</html>

